<template>
    <h1>个人中心</h1>
    <el-tabs v-model="first" class="demo-tabs">
        <el-tab-pane label="个人信息" name="first">
            <el-descriptions title="用户简介" direction="vertical" border style="margin-top: 20px">
                <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
                    <el-image style="width: 100px; height: 100px" :src="url + srcName" />
                </el-descriptions-item>
                <el-descriptions-item label="用户名">{{ userInfo.userName }}</el-descriptions-item>
                <el-descriptions-item label="用户手机号">{{ userInfo.phone != null ? userInfo.phone : '暂无'
                }}</el-descriptions-item>
                <el-descriptions-item label="电子邮件">{{ userInfo.email != null ? userInfo.email : '暂无'
                }}</el-descriptions-item>
                <el-descriptions-item label="角色">{{ userInfo.role == 1 ? '管理员' : '咨询师' }}</el-descriptions-item>
                <!-- <el-descriptions-item label="Remarks">
                    <el-tag size="small">School</el-tag>
                </el-descriptions-item> -->
                <el-descriptions-item label="Address">
                    {{ currentUserInfo.address != null ? currentUserInfo.address : '暂无' }}
                </el-descriptions-item>
            </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input show-password v-model="ruleForm.oldPassword" placeholder="请输入" prefix-icon="Lock" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input show-password v-model="ruleForm.password" placeholder="请输入" prefix-icon="Lock" />
                </el-form-item>
                <el-form-item label="确认密码" prop="cpassword">
                    <el-input show-password v-model="ruleForm.cpassword" placeholder="请输入" prefix-icon="Lock" />
                </el-form-item>
                <el-form-item>
                    <el-button size="large" style="width: 40%;" type="primary" @click="submitForm(ruleFormRef)">提
                        交</el-button>
                    <!-- <el-button size="large" style="width: 40%;" type="primary" @click="cancel">取 消</el-button> -->
                </el-form-item>
            </el-form>
        </el-tab-pane>


        <el-tab-pane label="编辑" name="third">
            <el-form ref="upFormRef" style="max-width: 600px" :model="upRuleForm" :rules="upRules" label-width="auto"
                class="demo-ruleForm" status-icon>

                <el-form-item label="用户手机号" prop="phone">
                    <el-input v-model="upRuleForm.phone" placeholder="请输入" prefix-icon="User" />
                </el-form-item>

                <el-form-item label="用户邮箱" prop="email">
                    <el-input v-model="upRuleForm.email" placeholder="请输入" prefix-icon="User" />
                </el-form-item>


                <el-form-item label="头像" prop="address">
                    <el-upload v-model:file-list="fileList" class="avatar-uploader" list-type="picture-card"
                        action="http://localhost:8080/file/upload" :on-success="handleAvatarSuccess">

                        <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button size="large" style="width: 40%;" type="primary" @click="updateUser(upFormRef)">提
                        交</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>

    </el-tabs>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router'
import { onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'


const imgUrl = ref('')
const handleAvatarSuccess = (
    response,
    uploadFile
) => {
    imgUrl.value = URL.createObjectURL(uploadFile.raw)
    upRuleForm.img = response.data
    console.log(upRuleForm.img);
}

//用户信息sys
const userInfo = ref({});
//用户图片信息
const srcName = ref('')
//用户信息咨询师
const currentUserInfo = ref({});
const url = ref('http://localhost:8080/file/downLoad?fileName=')
const getUserInfo = () => {
    userInfo.value = localStorage.getItem('userInfo');
    //   console.log(userInfo.value);
    userInfo.value = JSON.parse(userInfo.value);
    srcName.value = userInfo.value.img
    //   console.log(userInfo.value);
    // console.log(userInfo.value.role);
    //   if(userInfo.value.role == 1){
    //     showRole.value = true;
    //   }else{
    //     showRole.value = false;
    //   }
}
//获取咨询师信息
const getCurrentUserInfo = () => {
    // console.log(userInfo.value);
    const userId = userInfo.value.consultId
    axios.get('/consult/' + userId).then(res => {
        // console.log(res);
        currentUserInfo.value = res.data.data
        // console.log(currentUserInfo.value.id);
    }).catch(err => {
        console.log("没有咨询师信息");
    })
}



//用户信息数据
const ruleFormRef = ref()
const ruleForm = reactive({
    oldPassword: '',
    password: '',
    cpassword: ''
})

//编辑用户信息数据
const upFormRef = ref()
const upRuleForm = reactive({
    phone: '',
    email: '',
    address: '',
    img:''
})
//编辑用户信息规则
const upRules = reactive({
    phone: [
        { required: true, message: '手机号不许为空', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '邮箱不许为空', trigger: 'blur' }
    ]
})

const updateUser = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post('/SystemUser/updateSomeInfo', {
                phone: upRuleForm.phone,
                email: upRuleForm.email,
                address: upRuleForm.address,
                id: userInfo.value.id,
                img: upRuleForm.img
            }).then(res => {
                console.log(res);
            }).catch(err => {
                ElMessage({
                message: '修改失败！',
                type: 'warning',
            })
            })
        } else {
            // console.log('error submit!', fields)
            ElMessage({
                message: '修改失败！',
                type: 'warning',
            })
        }
    })
}









//用户信息数据规则
const rules = reactive({
    oldPassword: [
        { required: true, message: '不许为空', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '不许为空', trigger: 'blur' }
    ],
    cpassword: [
        { required: true, message: '不许为空', trigger: 'blur' }
    ]
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            // console.log({...ruleForm});
            if (ruleForm.password != ruleForm.cpassword) {
                ElMessage({
                    message: '两次密码不一致！',
                    type: 'warning',
                })
                return;
            }
            //调用后端登录接口
            axios.post('/SystemUser/checkPwd', {

                oldPassword: ruleForm.oldPassword,
                password: ruleForm.password,
                userName: userInfo.value.userName,

            }).then(res => {
                console.log(res);
            })
        } else {
            console.log('error submit!', fields)
            ElMessage({
                message: '修改失败！',
                type: 'warning',
            })
        }
    })
}

onMounted(() => {
    getUserInfo();
    getCurrentUserInfo();
    // console.log(url.value+srcName.value);
})
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar {
    width: 100px;
    /* 设置你想要的宽度 */
    height: 100px;
    /* 设置你想要的高度 */
    object-fit: cover;
    /* 确保图片按比例缩放并裁剪以填充整个容器 */
}
</style>